<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="奖励明细"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 整体卡片 -->
      <view class="detail-card">
        <!-- 用户信息区域 -->
        <view class="user-section">
          <image :src="userInfo.avatar" class="user-avatar" mode="aspectFill" />
          <view class="user-info">
            <view class="user-name-row">
              <text class="user-name">{{ userInfo.name }}</text>
              <view v-if="userInfo.isMember" class="member-badge">
                <text class="member-text">会员</text>
              </view>
            </view>
            <text class="user-phone">{{ userInfo.phone }}</text>
            <text class="user-register"
              >注册时间：{{ userInfo.registerTime }}</text
            >
          </view>
        </view>

        <!-- 奖励和积分区域 -->
        <view class="reward-section">
          <view class="reward-row">
            <view class="reward-left">
              <text class="reward-label">奖励</text>
              <text class="reward-value">{{ rewardAmount }}</text>
              <image
                src="/static/icon/skm.png"
                class="reward-icon"
                mode="aspectFit"
              />
            </view>
            <text class="order-count">{{ orderCount }}个订单</text>
          </view>

          <view class="stats-row">
            <text class="stats-label">累计积分：</text>
            <text class="stats-value">{{ totalPoints }}</text>
          </view>
        </view>

        <!-- 粉丝订单标题 -->
        <view class="section-title">
          <text>粉丝订单</text>
        </view>

        <!-- 订单详细数据组 -->
        <view class="data-section">
          <!-- 变动时间和状态 -->
          <view class="data-item">
            <view class="data-label-wrapper">
              <text class="data-label">变动时间：</text>
              <text class="data-value">{{ changeTime }}</text>
            </view>
            <view class="status-badge success">
              <text class="status-text">交易成功</text>
            </view>
          </view>

          <view class="data-item">
            <text class="data-label">粉丝积分：</text>
            <text class="data-value">{{ detailData.fansPoints }}</text>
          </view>

          <view class="data-item">
            <text class="data-label">奖励抵用券：</text>
            <text class="data-value">{{ detailData.rewardCoupon }}</text>
          </view>

          <view class="data-item">
            <text class="data-label">未发效抵用券：</text>
            <text class="data-value">{{ detailData.inactiveCoupon }}</text>
          </view>

          <view class="data-item">
            <text class="data-label">订单编号：</text>
            <view class="order-number-row">
              <text class="data-value order-number">{{
                detailData.orderNumber
              }}</text>
              <view v-if="userInfo.isMember" class="member-badge-small">
                <text class="member-text-small">会员</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 用户信息
const userInfo = ref({
  avatar: "/static/logo.png",
  name: "wd_id9j911kxw",
  phone: "151****0513",
  isMember: true,
  registerTime: "2025-09-15",
});

// 奖励金额
const rewardAmount = ref("0.0100");

// 累计积分
const totalPoints = ref("0.2000");

// 订单数量
const orderCount = ref("1");

// 变动时间
const changeTime = ref("2025-09-15 10:53:36");

// 详细数据
const detailData = ref({
  fansPoints: "0.20",
  rewardCoupon: "0.0100",
  inactiveCoupon: "0.0000",
  orderNumber: "196742147169****9524",
});

// 接收传递的粉丝ID
const fanId = ref("");

onLoad((options) => {
  if (options.fanId) {
    fanId.value = options.fanId;
    loadRewardDetail();
  }
});

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 加载奖励明细
const loadRewardDetail = async () => {
  try {
    // TODO: 调用真实 API 获取粉丝奖励明细
    console.log("加载粉丝奖励明细:", fanId.value);
  } catch (error) {
    console.error("加载奖励明细失败:", error);
    uni.showToast({
      title: "加载失败",
      icon: "none",
    });
  }
};

onMounted(() => {
  // 页面加载完成
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx 32rpx;
}

// 整体卡片
.detail-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
}

// 用户信息区域
.user-section {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.user-avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.user-name-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.user-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.member-badge {
  display: inline-flex;
  align-items: center;
  padding: 4rpx 12rpx;
  background-color: #52c41a;
  border-radius: 4rpx;
}

.member-text {
  font-size: 20rpx;
  color: #fff;
}

.user-phone {
  font-size: 24rpx;
  color: #666;
}

.user-register {
  font-size: 24rpx;
  color: #999;
}

// 奖励和积分区域
.reward-section {
  margin-bottom: 32rpx;
}

.reward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.reward-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.reward-label {
  font-size: 28rpx;
  color: #333;
}

.reward-value {
  font-size: 36rpx;
  color: #ff4d4f;
  font-weight: 700;
}

.reward-icon {
  width: 40rpx;
  height: 40rpx;
}

.order-count {
  font-size: 26rpx;
  color: #333;
}

.stats-row {
  display: flex;
  align-items: center;
}

.stats-label {
  font-size: 26rpx;
  color: #666;
}

.stats-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

// 粉丝订单标题
.section-title {
  text-align: center;
  padding: 24rpx 0;
  border-top: 1rpx solid #f0f0f0;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 24rpx;

  text {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
}

// 详细数据区域
.data-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.data-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.data-label-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
}

.data-label {
  font-size: 26rpx;
  color: #666;
}

.data-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 6rpx 16rpx;
  border-radius: 6rpx;

  &.success {
    background-color: #52c41a;
  }
}

.status-text {
  font-size: 22rpx;
  color: #fff;
}

.order-number-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.order-number {
  max-width: 400rpx;
}

.member-badge-small {
  display: inline-flex;
  align-items: center;
  padding: 2rpx 8rpx;
  background-color: #52c41a;
  border-radius: 4rpx;
  flex-shrink: 0;
}

.member-text-small {
  font-size: 18rpx;
  color: #fff;
}
</style>
